import React from 'react';
import { Link } from 'react-router';
import { Flex,WingBlank } from 'antd-mobile';


import imgURL from '../image/face/home_.jpg';


import xcsoft from '../js/countdown.js';
// import AppIndexjs from './js/index.js';
import '../css/countdown.css';
import '../index.less';

// const homeUrl = "";
export default class Index extends React.Component {
    constructor(props){
        super(props);
    }
  componentWillMount() {
   /**
     * time.day 和 time.dayZero 区别
     * time.day 如果是1天 返回 1
     * time.dayZero 如果是1天 则返回 01
     * 除了day拥有Zero外 hour,minute,second,msec都有Zero 即小于10的，都会在前面补0
     */
      // xcsoft.countdown('2028-11-11',function (time) {
      //     //time.days=总天数
      //     document.getElementById("y1").innerHTML=time.year
      //     document.getElementById("d1").innerHTML=time.day
      //     document.getElementById("h1").innerHTML=time.hourZero
      //     document.getElementById("i1").innerHTML=time.minuteZero
      //     document.getElementById("s1").innerHTML=time.secondZero
      //     document.getElementById("m1").innerHTML=time.msecZero
      // },function (time) {
      //     //倒计时结束后的操作
      // })
      let _this = this;
      xcsoft.countup('2012-2-2',function (time) {
        if(!document.getElementById("y2")){
            return true;
        }else{
            document.getElementById("y2").innerHTML=time.year
          document.getElementById("d2").innerHTML=time.day
          document.getElementById("h2").innerHTML=time.hourZero
          document.getElementById("i2").innerHTML=time.minuteZero
          document.getElementById("s2").innerHTML=time.secondZero
        }
          
      })

      xcsoft.countup('2017-7-7',function (time) {
        if(!document.getElementById("y2")){
            return true;
        }else{
          document.getElementById("y3").innerHTML=time.year
          document.getElementById("d3").innerHTML=time.day
          document.getElementById("h3").innerHTML=time.hourZero
          document.getElementById("i3").innerHTML=time.minuteZero
          document.getElementById("s3").innerHTML=time.secondZero
        }
      })

      // var nes=parseInt(new Date().getTime()/1000)+60;
      // xcsoft.countdown(parseInt(nes)+'.3',function (time) {
      //     document.getElementById("s3").innerHTML=time.secondZero
      //     document.getElementById("m3").innerHTML=time.msecZero
      // })
  }
  componentWillUnmount(){
  }
  render() {
    return (
      <div className="body">
        <h2>欢迎进入琦长老的空间</h2>
        <div className="flex-container" style={{ padding: '15px 0' }}>
        {/* <WhiteSpace size="lg" /> */}
        <WingBlank>
          <Flex justify="center">
              <Link to='s1'>
                <img src={imgURL} width="100%" height="100%">

                </img>
              </Link>
          </Flex>
        </WingBlank>
        </div>
        <div>
            <i>Looooooooooving Time</i>
            <div>
                <span class="red">
                    <p id="y2"></p>
                    <p>年</p>
                </span>
                <span class="yg">
                    <p id="d2"></p>
                    <p>天</p>
                </span>
                <span class="or">
                    <p id="h2"></p>
                    <p>时</p>
                </span>
                <span class="pi">
                    <p id="i2"></p>
                    <p>分</p>
                </span>
                <span class="pk">
                    <p id="s2"></p>
                    <p>秒</p>
                </span>
            </div>
        </div>

        <div>
            <i>Marrrrrrrrrrrrrrried Time</i>
            <div>
                <span class="red">
                    <p id="y3"></p>
                    <p>年</p>
                </span>
                <span class="yg">
                    <p id="d3"></p>
                    <p>天</p>
                </span>
                <span class="or">
                    <p id="h3"></p>
                    <p>时</p>
                </span>
                <span class="pi">
                    <p id="i3"></p>
                    <p>分</p>
                </span>
                <span class="pk">
                    <p id="s3"></p>
                    <p>秒</p>
                </span>
            </div>
        </div>
      </div>
    );
  }
}